// 验证码组件

import React from 'react';
import axios from 'axios';
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import Pts from 'prop-types';

const Captcha = forwardRef((props, ref) => {
    const [captchaUrl, setCaptchaUrl] = useState('');
    // 由于 验证码组件多次使用, 导致后面的验证码生成的key和captchaUrl会覆盖掉上一次生成的key和captchaUrl
    // 所以 建议将key 存到父组件中, 这样不会覆盖;
    useEffect(() => {
        // 初始化执行
        initCaptchaFn()
    }, []);

    // 初始化获取验证码
    const initCaptchaFn = () => {
        axios.get(`https://reactapi.iynn.cn/captcha/api/${props.type}`).then(res => {
            if (res.status == 200) {
                // 将后端返回的key 值通过子传父的形式传递给父组件
                props.getKey(res.data.key);
                // 设置图片
                setCaptchaUrl(res.data.img)
            }
        })
    }
    // 点击刷新验证码
    const loadFreshFn = () => {
        initCaptchaFn()
    }

    // 抛出该组件中的数据和方法
    useImperativeHandle(ref, () => {
        return {
            initCaptchaFn
        }
    })
    return (
        <div>
            <img style={{ width: props.w, height: props.h }} src={captchaUrl} onClick={loadFreshFn} />
        </div>
    );
})

// 定义接收的props 的类型
Captcha.propTypes = {
    getKey: Pts.func.isRequired
}

// 定义接收的props 的默认值
Captcha.defaultProps = {
    w: '140px',  //  默认的宽
    h: '40px',  // 默认高
    type: 'math' // 默认的验证码类型
}

// 注意: 当使用 forwardRef去处理函数组件时, 该函数组件不能使用 propTypes 和 defaultProps
// 项目中问题: 面试问题点

export default Captcha;
